<template>
  <div>
      <div class="top">
          <a href="#" @click="goback"></a>
          <p>对话属性设置</p>
      </div>
      <div class="head">
          <p>设置对话双方头像和昵称</p>
      </div>
      <div class="list">
          <li>
          <p>朋友头像</p>
          </li>
          <li>
              <img src="../../assets/img/user/timg.jpg" alt="">
              <a href="#"></a>
          </li>
      </div>
          <router-link to="nickname">
      <div class="list">
          <li>
          <p>朋友昵称</p>
          </li>
          <li>
              <span>{{this.global.userinfo[0].nickname}}</span>
              <a href="#"></a>
          </li>
      </div>
      </router-link>
     <router-link to="account">
      <div class="list">
          <li>
          <p>支付宝账号</p>
          </li>
          <li>
              <span>{{this.global.userinfo[0].account}}</span>
              <a href="#"></a>
          </li>
      </div>
     </router-link>
     <router-link to="vip">
      <div class="list">
          <li>
          <p>会员等级</p>
          </li>
          <li>
              <span>{{this.global.vip}}</span>
              <a href="#"></a>
          </li>
      </div>
      </router-link>
        <div class="space"></div>
      <div class="list">
          <li>
          <p>设置聊天背景</p>
          </li>
          <li>
              <span>请选择</span>
              <a href="#"></a>
          </li>
      </div>
      <div class="space"></div>
      <div class="list" @click="clear">
          <li>
          <p>清空聊天记录</p>
          </li>
          <li>
              <a href="#"></a>
          </li>
      </div>
      <!-- <div class="space"></div> -->
      <!-- <div class="space"></div> -->
      <!-- <div class="footer">
          <p>退出"宝宝"爱支付</p>
      </div> -->
      <div class="space1"></div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    data(){
        return{
            
        }
    },
    methods:{
        goback(){
            this.$router.go("-1")
        },
        clear(){
            Dialog.confirm({
                title: '确认删除聊天记录吗',
                message: ''
                }).then(() => {
                this.$toast("清楚成功")
                this.global.list = []
                }).catch(() => {
                // on cancel
                });
        }
    }
    
}
</script>

<style lang="less" scoped>
.head{
    background-color: #f6f6f6;
    height: 35px;
    p{
        margin: 0;
        font-size: 12px;
        margin-left: 10px;
        line-height: 35px;
    }
}
.space{
    background-color: #f6f6f6;
    height: 15px;
}
.space1{
    background-color: #f6f6f6;
    height: 300px;
}
.top{
    background-color: #1c81cf;
    display: flex;
    align-items: center;
    height: 40px;
    a{
        width: 25px;
        height: 25px;
        background: url("../../assets/img/left.png")no-repeat;
        background-size: 100%;
    }
    p{
        margin: 0;
        margin-left: 33%;
        color: #fff;
    }
}
.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  li{
      display: flex;
      margin: 0px 10px;
      img{
          width: 50px;
          height: 50px;
      }
      p{
          font-size: 13px;
          margin-left: 5px;
      }
      span{
          font-size: 13px;
          color: #7a7a7a;
      }
      a{
          width: 20px;
          height: 20px;
          background: url("../../assets/img/right_1.png") no-repeat;
          background-size: 100%;
      }
  }
}
.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
    li{
        display: flex;
         align-items: center;
         margin-left: 10px;
        img{
            width: 25px;
            height: 20px;
        }
        p{
            font-size: 13px;
            margin-left: 10px;
            color: #000;
        }
        span{
          font-size: 12px;
          color: #7a7a7a;
      }
        a{
            width: 20px;
            height: 20px;
            background: url("../../assets/img/right_1.png") no-repeat;
            background-size: 100%;
            margin-right: 10px;
        }
    }
}
.footer{
    height: 40px;
    p{
        text-align: center;
        line-height: 40px;
        font-size: 13px;
        margin: 0;
    }
}
</style>